<template>
  <view class="">
    <SearchInput></SearchInput>

    <!-- 轮播图 -->
    <view>
      <u-swiper
        :list="swiperList"
        name="image_src"
        height="340"
        mode="dot"
      ></u-swiper>
    </view>

    <!-- 导航 -->
    <view class="nav u-flex">
      <navigator
        class="u-flex-1 u-padding-15"
        v-for="item in navList"
        :key="item.name"
      >
        <u-image mode="widthFix" :src="item.image_src"></u-image>
      </navigator>
    </view>

    <!-- 楼层 -->
    <view
      class="floor"
      v-for="item1 in floorList"
      :key="item1.floor_title.name"
    >
      <navgiator class="floor_title">
        <u-image mode="widthFix" :src="item1.floor_title.image_src"> </u-image>
      </navgiator>
      <view class="floor_conent">
        <navgaitor
          v-for="item2 in item1.product_list"
          :key="item2.name"
          class="floor_item"
        >
          <u-image width="100%" height="100%" mode="scaleToFill" :src="item2.image_src"> </u-image>
        </navgaitor>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      swiperList: [],
      navList: [],
      floorList: [],
    };
  },
  onLoad() {
    this.getSwiper();
    this.getNavList();
    this.getFloorList();
  },
  methods: {
    async getSwiper() {
      this.swiperList = await this.$u.get('/home/swiperdata')
    },
    async getNavList() {

      this.navList = await this.$u.get('/home/catitems')
    },
    async getFloorList() {
     
     this.floorList = await this.$u.get('/home/floordata')
    },
  },
};
</script>

<style lang="scss">
.floor {
  margin-top: 44rpx;
  .floor_conent {
    overflow: hidden;
    .floor_item {
      float: left;
      width: 232rpx;
    }
    .floor_item:first-child{
      margin-left: 13rpx;
      height: 386rpx;
    }
    .floor_item:nth-last-child(-n + 4){
      height: 188rpx;
      margin-left: 13rpx;
    }
    .floor_item:nth-last-child(-n + 2){
      margin-top: 13rpx;
    }
    
  }
}
</style>
